<template>
  <div class="me-app">
    <child-head name="个人中心" />
    <nav>
      <img :src="userInfo.avatar" />
      <p>{{ userInfo.nickName }}</p>
    </nav>
    <div class="chat-list" @click="theme('light')">
      <div class="photo">
        <img :src="userInfo.avatar" />
      </div>
      <div class="content">
        <div>
          <p class="content_nickname">浅色</p>
        </div>
      </div>
    </div>
    <div class="chat-list" @click="theme('dark')">
      <div class="photo">
        <img :src="userInfo.avatar" />
      </div>
      <div class="content">
        <div>
          <p class="content_nickname">深色</p>
        </div>
      </div>
    </div>
    <div class="chat-list" @click="logout">
      <div class="photo">
        <img :src="userInfo.avatar" />
      </div>
      <div class="content">
        <div>
          <p class="content_nickname">退出登录</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import ChildHead from "../../../components/head-app/child-head";

export default {
  name: "meIndex",
  components: { ChildHead },
  setup() {
    const router = useRouter();
    // 退出登录
    const store = useStore();
    const { userInfo } = store.getters;
    const logout = async () => {
      await store.dispatch("EDIT_USER_INFO", {});
      await router.push({
        name: "Login",
      });
    };
    const theme = (type) => {
      store.commit("data_theme", { themeType: type });
      window.document.documentElement.setAttribute("data-theme", type);
    };
    return {
      userInfo,
      logout,
      theme,
    };
  },
};
</script>

<style scoped lang="scss">
.me-app {
  @include font_color("font_color1");
  font-size: $font-size-20;
  nav {
    display: flex;
    align-items: center;
    img {
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 0.2rem;
    }
    p {
      font-size: $font-size-32;
      font-weight: 600;
    }
  }
}
</style>
